1.Gemに追加
bundle install
2. app/assets/javascripts/application.js
以下を追加
//= require
jquery.validate.additional-methods
//= require
jquery.validate
3. 必須フィールドを記述
<%= form.text_field :name, id: :name, name: :name, class: :text_field %>
</div>
4. Validateをトリガーするメソッドを記述
$(function(){
$(“#my_form”).validate({
rules : {
name: {
required: true
}
},
messages: {
name: {
required: “必須入力です”,
}
}
});
});
以上で必須フィールドのValidationができる。
5.エラー表示の場所を変更する。
<div>名前</div>
<div id=”emsg_name”></div> ←追加
<div>
<%= form.text_field :name, id: :name, name: :name, :maxlength => 255, :size => 100, class: :text_field %>
</div>
$(document).ready(function () {
$(“#child_form”).validate({
rules : {
name: {
required: true
}
},
messages: {
name: {
required: “必須入力です”,
}
},
errorPlacement: function(error, element) { ←追加
if (element.attr(‘name’) == ‘name’) {
error.appendTo($(”#emsg_name”));
}
}
});
});
<div id=”emsg_name”></div>の場所にエラー表示されるようになった。
以上
